import React, {Component} from 'react';
import {Spin, Row, Col, Button} from 'antd';
import '../css/register.css';
import {Head} from '../components/EditComponent';
import app from '../AppMethod';
import {customer} from "../value";
import moment from 'moment';
import {config} from "../config";
import ReactPullLoad, {STATS} from 'react-pullload';
import '../../node_modules/react-pullload/dist/ReactPullLoad.css';

class SearchOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loading: false,
            customer_phone: '',
        }
    };

    render() {
        return (
            <div className="registerContainer">
                <div style={{position: 'fixed', width: '100%', height: '44px', top: 0, left: 0, zIndex: 4}}>
                    <Head back="false" type="请输入要绑定客户的联系电话"
                          handleSearchData={(phone) => this.handleGetCustomerId(phone)}
                          click={() => this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    {
                        this.state.data.length > 0 ?
                            <div style={{marginTop: 54}}>
                                {
                                    this.state.data.length > 0 ?
                                        this.state.data.map((item, index) => {
                                            return (
                                                <OrderItem key={index} data={item}
                                                           handleRefresh={() => this.handleRefresh()}/>
                                            )
                                        }) : ''
                                }
                            </div> : ''
                    }
                    {
                        this.state.data.length <= 0 ?
                            <div style={{textAlign: 'center', marginTop: '64px'}}>
                                暂无数据
                            </div> : ''
                    }
                </Spin>
            </div>
        )
    };

    componentDidMount() {

    };

    /**
     * 获取输入框的值
     * @param phone
     */
    handleGetCustomerId(phone) {
        let data = {
            customer_phone: phone
        };
        this.setState({customer_phone:phone});
        this.handleSearchData(data);
    }

    /**
     * 根据输入框输入的客户id查询订单列表
     * @param id
     */
    handleSearchData(data) {
        const _this = this;
        this.setState({loading: true});
        app.post(customer.SEARCH_CUSTOMERBYPHONE, data).then((result) => {
            if (result.code === 1) {
                _this.setState({data: result.data.dataSet, loading: false});
            } else {
                _this.setState({data: [], loading: false});
                app.alert(result.msg, 'error', 2);
            }
        })
    };

    /**
     * 刷新列表
     */
    handleRefresh() {
        let data = {
            customer_phone: this.state.customer_phone
        };
        this.handleSearchData(data);
    }

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };
}

/**
 * 订单组件
 */
class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open_id: app.getData('openid')
        }
    };

    render() {
        const {customer_name, customer_code, customer_phone, customer_address, customer_id, customer_open_id} = this.props.data;
        return (
            <Row style={{backgroundColor: '#fff', padding: '10px 12px', margin: '10px'}}>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    客户名：{customer_name}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    客户编号：{customer_code}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    联系方式：{customer_phone}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    地址：{customer_address}
                </Row>
                <Row style={{height: '30px', lineHeight: '30px', marginTop: 5}}>
                    <Col span={24} style={{textAlign: 'center'}}>
                        {
                            customer_open_id != null ?
                                <Button type={'primary'} disabled>
                                    {
                                        customer_open_id == this.state.open_id ? "已绑定" : "已被他人绑定"
                                    }
                                </Button> :
                                <Button type={'primary'} onClick={() => this.handleBind(customer_id)}>确认绑定</Button>
                        }
                    </Col>
                </Row>
            </Row>
        )
    };

    /**
     * 确认绑定
     * @param id
     */
    handleBind(id) {
        let data = {
            customer_id: id,
            customer_open_id: app.getData('openid'),
            customer_nickname: app.getData('nickname'),
            customer_headimgurl: app.getData('headimgurl')
        };
        const _this = this;
        app.post(customer.CONFIRM_BINDCUSTOMER, data).then((result) => {
            if (result.code === 1) {
                _this.props.handleRefresh();
                app.alert('绑定成功', 'success', 2);
            } else {
                app.alert('绑定失败!' + result.msg, 'error', 2);
            }
        })
    }
}

export default SearchOrder;